import React, { PureComponent } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import Authorized from '@/utils/Authorized';
import { Card, Row, Col, Upload, Icon, Affix, Button, Spin, Input, Popconfirm, Empty, Tag } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';


@connect(({ paper }) => ({
  paper: paper.paper,
}))
class Competition extends PureComponent {

  componentDidMount() {
    const { match: { params: { id } }, dispatch } = this.props;
    dispatch({
      type: 'paper/getUserExaminationPaper',
      payload: {
        competitionId: id
      }
    })
  }

  handlePreview = (id) => {

  }

  handleUploadData = (paperId, questionId, columnId) => {
    const { match: { params: { id } } } = this.props;
    const data = {
      "competitionId": id,
      "paperId": paperId,
      "questionId": questionId,
      'columnId': columnId,
    }
    return data
  }

  handleDefaultFile = (paperId, id) => {
    if (id) {
      const list = [{
        uid: '1',
        name: id,
        status: 'done',
        url: `http://localhost:8080/image/answer/${paperId}/${id}`
      }]
      return list;
    }
    return null;
  }

  onBack = () => {
    router.push(`/competition/enrollList`)
  }

  render() {
    const { paper } = this.props;
    console.log(paper)
    const column = paper && paper.columnsVo && paper.columnsVo.map((item, index) => (
      <Row key={item.id} type="flex" justify="center">
        <Col span={16}>
          <Card
            key={item.id}
            title={`${index + 1} 、 ${item.title}`}
          >
            {item.questionVos.map((question, index1) => (
              <Row key={question.id}>
                <Card
                  key={question.id}
                  title={`问题${index1 + 1}:${question.title}`}
                >
                  <Authorized authority="user">
                    <Upload
                      action='/api/competition/answerUpload'
                      name="file"
                      // onChange={this.handleChange}
                      // fileList={this.state.fileList}
                      defaultFileList={this.handleDefaultFile(item.answerPaperVos[index1].paperId, item.answerPaperVos[index1].answer)}
                      data={() => this.handleUploadData(item.paperId, question.id, item.id)}
                    >
                      <Button>
                        <Icon type="upload" /> 上传
                      </Button>
                    </Upload>
                  </Authorized>
                </Card>
              </Row>
            ))}
          </Card>
        </Col>

      </Row>

    ))
    return (
      <PageHeaderWrapper>
        <Row type="flex" justify="center">
          <Col span={16}>
            <Card>
              <h2>{paper && paper.paperVo && paper.paperVo.title}</h2>
            </Card>
          </Col>
        </Row>
        {column}
        <Row type="flex" justify="center">
          <Col span={16}>
            <Card>
              <Row type="flex" justify="end">
                <Col span={4}>
                  <Affix offsetBottom={40}>
                    <Authorized authority="user">
                      <Button
                        type="primary"
                        onClick={this.onBack}
                      >
                        返回
                      </Button>
                    </Authorized>
                  </Affix>
                </Col>
              </Row>
            </Card>
          </Col>
        </Row>
      </PageHeaderWrapper>
    );
  }
}

export default Competition;
